<template>
    <el-select
        v-model="formData[item.prop]"
        :style="item.style ? item.style : { width: '220px', minHeight: '32px' }"
        :disabled="isBan"
        :placeholder="item.placeholder"
        :clearable="item.clearable"
        :multiple="item.multiple"
        :collapse-tags="item.collapseTages"
        :remote="item.remote"
        :filterable="item.filterable"
        :remote-method="item.remoteMethod"
        :popper-class="`use-select-popper ${item.popperCalss}`"
        @change="change"
    >
        <searchInput
            v-if="item.multiple"
            v-model.trim="searchVal"
            @confirm-search="searchValue"
        />
        <template
            v-if="item.multiple"
            #empty
        >
            <div class="search-empty">
                <searchInput
                    v-model.trim="searchVal"
                    @confirm-search="searchValue"
                />
                <p class="el-select-dropdown__empty">
                    无数据
                </p>
            </div>
        </template>
        <el-option
            v-for="option in options"
            :key="option[optionsKey.value]"
            :label="option[optionsKey.label]"
            :value="option[optionsKey.value]"
            :disabled="option.disabled"
        >
            <!-- 多选 -->
            <template v-if="item.multiple">
                <span class="check" />
                <span>{{ option[optionsKey.label] }}</span>
            </template>
        </el-option>
    </el-select>
</template>

<script>
import { useFormProps, changeItem } from './useFormProps'
import { defineComponent, computed, reactive, toRefs } from 'vue'
export default defineComponent({
    name: 'UseSelect',
    props: useFormProps,
    emits: ['event'],
    setup(props, context) {
        const state = reactive({
            options: computed(() => props.item.options),
            searchVal: ''
        })
        const change = () => {
            changeItem(context, props)
        }
        const options = computed(() => props.item.options)
        const searchList = computed(() => {
            return props.item.options.filter((item) => item[props.optionsKey.label].indexOf(state.searchVal) != -1)
        })
        const isBan = computed(() => props.readonly || props.item.readonly || props.disabled || props.item.disabled)
        const searchValue = (val) => {
            state.searchVal = val
            state.options = val ? searchList : options
        }
        return {
            ...toRefs(state),
            change,
            isBan,
            searchValue
        }
    }
})
</script>

<style lang="scss" scoped>
.search-empty {
  padding-top: 6px;
}
</style>
<style lang="scss">
.use-select-popper {
  &.is-multiple {
    .el-select-dropdown__item {
      &::after {
        display: none;
      }
      .check {
        display: inline-block;
        position: relative;
        top: 2px;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        background-color: #fff;
        z-index: 1;
        transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
          background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
        margin-right: 8px;
        &::after {
          box-sizing: content-box;
          content: '';
          border: 1px solid #fff;
          border-left: 0;
          border-top: 0;
          height: 7px;
          left: 4px;
          position: absolute;
          top: 1px;
          transform: rotate(45deg) scaleY(0);
          width: 3px;
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
        }
      }
      &.selected {
        background: transparent;
        color: $main_color;
        &::after {
          content: '';
        }
        .check {
          background-color: $main_color;
          border-color: $main_color;
          &::after {
            transform: rotate(45deg) scaleY(1);
          }
        }
      }
    }
  }
  .search-warp {
    padding: 8px 8px;
    border-bottom: 1px solid $b-color;
    .el-input__wrapper {
      background: $col-f3;
      box-shadow: none;
    }
  }
}
</style>
